<template>
  <transition name="collapse" v-on="on">
    <slot />
  </transition>
</template>

<script
  lang="ts"
  setup
  name="XTrans"
>
// column | row
const props = defineProps({
  direction: {
    type: String,
    default: 'column',
  },
})

const attr = computed(() => {
  const map = { row: 'Width', column: 'Height' }
  return map[props.direction]
})

const on = {
  beforeEnter(el) {
    el.style[`max${attr.value}`] = 0
    el.style.opacity = 0;
  },
  enter(el) {
    if (el.scrollHeight !== 0) {
      el.style[`max${attr.value}`] = `${el[`scroll${attr.value}`]}px`
    } else {
      el.style[`max${attr.value}`] = 0
    }
    el.style.overflow = 'hidden';
    el.style.opacity = 0.5;
  },
  afterEnter(el) {
    el.style[`max${attr.value}`] = ''
    el.style.overflow = ''
    el.style.opacity = 1;
  },
  beforeLeave(el) {
    el.style[`max${attr.value}`] = `${el[`scroll${attr.value}`]}px`
    el.style.overflow = 'hidden'
  },
  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style[`max${attr.value}`] = 0
    }
    el.style.opacity = 0.5;
  },
  afterLeave(el) {
    el.style[`max${attr.value}`] = ''
    el.style.opacity = 0;
  },
}
</script>

<style scoped>
.collapse-enter-active,
.collapse-leave-active {
  transition: all 0.3s linear;
}
</style>
